<script setup>
// setup script
// 1. setup script中全局作用域下所有的变量/函数都可以在模板中消费,局部的不行
// 2. 更推荐写在template上

import { reactive, ref } from 'vue';

// 消费变量
const msg = 'hello,world'

// 消费响应式数据
const num = ref(0)
const name = reactive({
  firstName: '张',
  lastName: '三'
})

// 消费箭头函数
const addNum = () => num.value++

// 消费普通函数
function changeName() {
  const a = 1 // 不能消费函数作用域的变量
  name.firstName = '李'
  name.lastName = '四'
}
</script>
<template>
  <div>
    <h1>消费变量</h1>
    <span>{{ msg }} </span>

    <hr>
    <h1>消费响应式数据</h1>
    <span>数字 {{ num }} </span>
    <br>
    <span>名字 {{ name.firstName + name.lastName }}</span>
    <br>
    <button @click="addNum">数字+1</button>
    <button @click="changeName">更改名字</button>

    <hr>
    {{ a }}
  </div>
</template>

